import React from 'react';
import PropTypes from 'prop-types';
import { Form, Input, Row, Col } from 'antd';
import styles from '../index.less';

const { Item } = Form;
const { TextArea } = Input;

// 员工发起申请
const columnList = [
    { label: '工作描述', prop: 'workDesc', isRequired: true, min: 2 },
    { label: '突出业绩', prop: 'outstandingPerformance', isRequired: true, min: 2 },
    { label: '需要改进的地方', prop: 'improve', isRequired: true, min: 2 },
    { label: '对公司的建议', prop: 'employeeToProposal', min: 0 }
];
const OwnApply = props => {
    const { form, type, detail, current } = props;
    const { getFieldDecorator } = form;
    return (
        <div>
            <div className={styles.title}>转正申请（{ current > 0 ? '自评' : '员工'}）</div>
            <div className={styles.formWrap} style={ type !== 'detail' ? { marginBottom: '10px' } : {}}>
                <Row>
                    <Col>
                        {columnList.map(item => (
                            <Item label={item.label}
                                key={item.prop}
                                help={type !== 'detail' ? `${item.min}-400个字符` : ''}>
                                {type !== 'detail' &&
                                    getFieldDecorator(item.prop, {
                                        rules: [
                                            {
                                                required: item.isRequired,
                                                message: `请输入${item.label}`
                                            },
                                            {
                                                max: 400,
                                                min: item.min,
                                                message: `${item.min}-400个字符`
                                            }
                                        ],
                                        initialValue: detail[item.prop]
                                    })(<TextArea placeholder="请输入" rows={4} />)}
                                {type === 'detail' &&
                                    getFieldDecorator(item.prop, {
                                        initialValue: detail[item.prop]
                                    })(<pre className={styles.preText}>{detail[item.prop]}</pre>)}
                            </Item>
                        ))}
                    </Col>
                </Row>
            </div>
        </div>
    );
};

OwnApply.propTypes = {
    /**
     * detail: 详细
     * edit: 员工发起
     */
    type: PropTypes.oneOf(['edit', 'detail']).isRequired
};

export default OwnApply;
